<template>
	<div id="all">
		<div v-if="isMain">
			<el-card class="box-card" style="width: 1180px">
		<!--根据巡检员名称和手机号码进行模糊查询-->
		<div class="search">
			<el-row gutter="20">
				<el-col :span="6" :inline="true" :model="query">
					<el-input
							v-model="query.insNickname"
							size="medium"
							placeholder="巡检员名称">
					</el-input>
				</el-col>
				
				<el-col :span="6">
					<el-input
							v-model="query.insTel"
							size="medium"
							placeholder="手机号码">
					</el-input>
				</el-col>
				
				<el-col :span="2">
					<el-button type="primary" size="medium" @click="loadIns">查询</el-button>
				</el-col>
				
				<el-col :span="8">
					<el-button type="info" size="medium" @click="reset">重置</el-button>
				</el-col>
				<el-col :span="2">
					<el-button type="success" size="medium" @click="dialog.addshow=true">添加</el-button>
				</el-col>
			</el-row>
		</div>
		
		<!--巡检员列表表格-->
		<el-table
				:data="insTableData"
				stripe
				style="width: 100%">
			<el-table-column
					prop="insNickname"
					label="巡检员">
			</el-table-column>
			<el-table-column label="头像" show-overflow-tooltip>
          		<template slot-scope="scope">
            	  <el-link @click="down(scope.row.insAvatar)" target="_blank">
            		   <img :src="scope.row.insAvatar" style="width: 60px; height: 60px" />
            	  </el-link>
                </template>
            </el-table-column>
			<el-table-column
					prop="insTel"
					label="手机号码">
			</el-table-column>
			<el-table-column
					prop="secName"
					label="管理路段">
			</el-table-column>
			<!-- <el-table-column
					prop="coTime"
					label="执勤时间"
					width="240">
			</el-table-column> -->
			<el-table-column
					prop="percentage"
					label="订单完成率"
					width="100">
			</el-table-column>
			<el-table-column
					prop="insStatus"
					label="状态"
					width="50">
					<template slot-scope="scope">
        				<span v-if="scope.row.insStatus=='0'">正常</span>
        				<span v-if="scope.row.insStatus=='1'">异常</span>
       				</template>
			</el-table-column>
			<el-table-column
					prop="insCreatedTime"
					label="注册时间"
					width="240">
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template slot-scope="scope">
					<el-button size="mini" type="#409EFF" @click="handleDetil(scope.row.insId)">详情</el-button>
					<el-dropdown trigger="click">
						<el-button size="mini" type="warning" >更多</el-button>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item class="clearfix">
								<el-button size="mini" type="priamry" @click="handleEdit(scope.row.insId)" plain>编辑</el-button>
							</el-dropdown-item>
							<el-dropdown-item class="clearfix">
								<el-popconfirm
										title="这是一段内容确定删除吗？"  @confirm="handleDelete(scope.row.insId)">
									<el-button size="mini" slot="reference" type="danger">删除</el-button>
								</el-popconfirm>
							</el-dropdown-item>
							<el-dropdown-item class="clearfix">
								<el-button size="mini" type="danger" plain @click="handleDisable1(scope.row.insId)">禁用</el-button>
							</el-dropdown-item>
							<el-dropdown-item class="clearfix">
								<el-button size="mini" type="success" plain @click="handleDisable2(scope.row.insId)">解禁</el-button>
							</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
		</el-table>
<!-- -------------------------------分页-------------------------------------- -->
		<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="query.currentPage"
				:page-sizes="pageInfo.pageSizes"
				:page-size="query.pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="pageInfo.total"
		>
		</el-pagination>
		
		<!--	添加-->
		<el-dialog title="添加巡检员" :visible.sync="dialog.addshow" width="30%">
			<el-form ref="addForm" :model="addForm" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="巡检员" prop="insNickname">
							<el-input v-model="addForm.insNickname"></el-input>
						</el-form-item>
						<el-form-item label="头像" prop="insAvatar" >
                			<el-input v-model="addForm.insAvatar" clearable ></el-input>
              			</el-form-item>
						<el-form-item label="图像">
							<el-upload
							ref="upload"
							:class="{ disUoloadSty: upload.uploadDisabled }"
							action="http://localhost:9000/admin/ins/uploadoss"
							name="file"
							list-type="picture-card"
							:on-preview="handlePreview"
							:on-progress="onProgress"
							:on-remove="handleRemove"
							:on-success="handleSuccess"
							:before-upload="beforeUpload"
							:on-change="handleChange"
							:file-list="upload.fileList"
							accept=".jpeg,.jpg,.gif,.png"
							:limit="upload.limitCountImg"
							>
							<i class="el-icon-plus"></i>
							</el-upload>
							<!--预览图片-->
							<el-dialog
							:modal-append-to-body="false"
							:visible.sync="upload.imgVisible"
							width="30%"
							>
							<img
								width="100%"
								:src="upload.dialogImageUrl"
								alt="图片未找到"
							/>
                		</el-dialog>
						</el-form-item>
						<!-- <el-form-item label="执勤时间" prop="coId">
									<el-select
										v-model="addForm.reservedInt"
										placeholder="请选择"
										style="width: 100%"
									>
										<el-option
										v-for="item in checkList"
										:key="item.coId"
										:label="item.coTime"
										:value="item.coId"
										>
										</el-option>
									</el-select>
									</el-form-item> -->
						<el-form-item label="密码" prop="insPassword">
							<el-input v-model="addForm.insPassword"></el-input>
						</el-form-item>
						<el-form-item label="电话" prop="insTel">
							<el-input v-model="addForm.insTel"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="dialog.addshow = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </span>
		</el-dialog>
		
		<!--	修改-->
		<el-dialog title="编辑巡检员信息" :visible.sync="dialog.updateshow" width="30%">
			<el-form ref="updateForm" :model="updateForm" label-width="80px">
				<el-row>
					<el-col :span="24">
						<el-form-item label="巡检员id" prop="insId" hidden>
							<el-input v-model="updateForm.insId"></el-input>
						</el-form-item>
						<el-form-item label="巡检员" prop="insNickname">
							<el-input v-model="updateForm.insNickname"></el-input>
						</el-form-item>
						<el-form-item label="头像" prop="insAvatar" >
                			<el-input v-model="updateForm.insAvatar" clearable ></el-input>
              			</el-form-item>
						<el-form-item label="图像">
							<el-upload
							ref="upload"
							:class="{ disUoloadSty: upload.uploadDisabled }"
							action="http://localhost:9000/ins/uploadoss"
							name="file"
							list-type="picture-card"
							:on-preview="handlePreview"
							:on-progress="onProgress"
							:on-remove="handleRemove"
							:on-success="handleSuccess"
							:before-upload="beforeUpload"
							:on-change="handleChange"
							:file-list="upload.fileList"
							accept=".jpeg,.jpg,.gif,.png"
							:limit="upload.limitCountImg"
							>
							<i class="el-icon-plus"></i>
							</el-upload>
							<!--预览图片-->
							<el-dialog
							:modal-append-to-body="false"
							:visible.sync="upload.imgVisible"
							width="30%"
							>
							<img
								width="100%"
								:src="upload.dialogImageUrl"
								alt="图片未找到"
							/>
                		</el-dialog>
						</el-form-item>
						<el-form-item label="密码" prop="insPassword">
							<el-input v-model="updateForm.insPassword"></el-input>
						</el-form-item>
						<el-form-item label="电话" prop="insTel">
							<el-input v-model="updateForm.insTel"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<span slot="footer" class="dialog-footer">
        <el-button @click="dialog.updateshow = false">取 消</el-button>
        <el-button type="primary" @click="update()">确 定</el-button>
      </span>
		</el-dialog>
	
	</el-card>
		</div>
		
	<!---详情页面--->
		<div v-if="!isMain">
		<el-row gutter="24">
        	<el-col :span="2">
           		<el-button type="info" size="medium" @click="goBack">返回</el-button>
        	</el-col>
     	 </el-row>
		 <!---巡检员详情页面-->
		  <el-descriptions class="margin-top" title="基础信息" :column="3" :size="size" border>
    	<el-descriptions-item label="巡检员名称">
			{{insDetailData1.insNickname}}
   		 </el-descriptions-item>
		<el-descriptions-item label="巡检员图像">
			<img :src="insDetailData1.insAvatar" style="width:30px"/>
   		</el-descriptions-item>
    	<el-descriptions-item label="手机号">
			{{insDetailData1.insTel}}
    	</el-descriptions-item>
    	<el-descriptions-item label="管理路段">
			{{insDetailData1.secName}}
    	</el-descriptions-item>
    	<el-descriptions-item label="执勤时间">
			{{insDetailData1.coTime}}
    	</el-descriptions-item>
		<el-descriptions-item label="状态">
			{{insDetailData1.insStatus}}
    	</el-descriptions-item>
  			</el-descriptions>

		<!--收费订单管理-->
		<div style="margin-top:100px">
			<el-title><h1>收费订单</h1></el-title>
		<el-table
				:data="insDetailData2"
				stripe
				style="width: 100%">
			<el-table-column
					prop="oiNo"
					label="订单编号">
			</el-table-column>
			<el-table-column
					prop="carLicensePlate"
					label="车牌号码">
			</el-table-column>
			<el-table-column
					prop="oiAmount"
					label="订单金额">
			</el-table-column>
			<el-table-column
					prop="ptType"
					label="支付方式"
					width="240">
					<template slot-scope="scope">
        				<span v-if="scope.row.ptType=='0'">微信</span>
        				<span v-if="scope.row.ptType=='1'">支付宝</span>
       				</template>
			</el-table-column>
		</el-table>

		</div>
		<!---考勤记录-->
		<template>
			<div style="margin-top:100px">
				<el-title><h1>考勤记录</h1></el-title>
				<el-table
    :data="insDetailData3"
    style="width: 100%"
    height="250">
    <el-table-column
      prop="insNickname"
      label="打卡人"
      width="150">
    </el-table-column>
    <el-table-column
      prop="coTime"
      label="打卡时间"
      width="300">
    </el-table-column>
    <el-table-column
      prop="coStatus"
      label="打卡状态"
      width="120">
	  <template slot-scope="scope">
        	<span v-if="scope.row.coStatus=='0'">正常</span>
        	<span v-if="scope.row.coStatus=='1'">迟到</span>
			<span v-if="scope.row.coStatus=='2'">休假</span>
       				</template>
    </el-table-column>
  </el-table>
			</div>
		</template>
		</div>
	</div>
	
</template>

<script>
	export default {
		name: 'Inspector',
		data() {
			return {
				upload: {
					// 是否禁用上传，
					uploadDisabled: false,
					// 是否显示预览图片
					imgVisible: false,
					// 预览图片url
					dialogImageUrl: "",
					// 上传的文件列表（用于在上传组件中回显图片）, 例如: [{name: 'xxx.jpg', url: 'https://xxx.com/xxx.jpg'}]
					fileList: [],
					limitCountImg: 1, //上传图片的最大数量
				},
				addForm:{},
				updateForm: {},
				pageInfo: {
					pageSizes: [5, 10, 20, 50],
					total: 0,
				},
				//封装的请求参数
				query: {
					currentPage: 1,
					pageSize: 5,
					insNickname: '',
					insTel: '',
				},
				dialog: {
					addshow: false,
					updateshow: false,
				},
				checkList:{},
				isMain:true,
				insDetailData3:[],
				insTableData:[],
				insDetailData2:[],
				insDetailData1:{},
				changeStatus:{},
			};
		},
		methods: {
			down(picture) {
        	let pic = picture.substr(picture.lastIndexOf("/") + 1);
       		window.location.href ="http://localhost:9000/admin/ins/down?filename=" + pic;
     		},
			//文件上传成功的钩子函数
			handleSuccess(response, file, fileList) {
					this.$message.success("图片上传成功");

					if (response.code == 200) {
						this.upload.imgVisible=true
						this.upload.dialogImageUrl = response.data;
        				this.addForm.insAvatar = response.data; 
						this.updateForm.insAvatar = response.data;
						this.upload.fileList = [{name: 'xxx.jpg', url: response.data}]; //将返回的文件储存路径赋值picture字段
					}
				},
				// 上传中
			onProgress(event, file, fileList) {
					this.upload.uploadDisabled = true;
				},
			//删除文件之前的钩子函数
			handleRemove(file, fileList) {
					this.$message.info("已删除原有图片");
					this.upload.uploadDisabled = fileList.length >= this.upload.limitCountImg;
				},
			//处理图片变化时
			handleChange(file, fileList) {
					this.upload.uploadDisabled = fileList.length >= this.upload.limitCountImg;
				},
				//点击列表中已上传的文件事的钩子函数
			handlePreview(file) {},
				//参数是上传的文件，若返回false，或返回Primary且被reject，则停止上传
			beforeUpload(file) {
					const isLt2M = file.size / 1024 / 1024 < 2;
					if (!isLt2M) {
						this.$message.error("上传图片大小不能超过 2MB!");
					}
					return isLt2M;
				},
			//当每页显示条数改变时
			handleSizeChange(size) {
				this.query.pageSize = size;
				this.loadIns();
			},
			//当页数改变时
			handleCurrentChange(currentPage) {
				this.query.currentPage = currentPage;
				this.loadIns();
			},
			loadIns() {
				this.$axios.post("admin/ins/getAllIns", this.query).then((res) => {
					this.insTableData = res.data.data.list;
					this.pageInfo.total = res.data.data.total;
				});
			},
			//重置按钮
			reset() {
				this.query.insNickname = "";
				this.query.insTel = "";
				this.loadIns();
			},
			save() {
				this.$axios.post("admin/ins", this.addForm).then((res) => {
          		this.$message.success("添加成功");
          		this.dialog.addshow = false;
          		//需要指定prop属性
          		this.$refs.addForm.resetFields();
            	//重置上传控件
         		this.$refs.upload.clearFiles();
          		  //修改是否显示对应的值
         		this.upload.uploadDisabled = false;
         		 this.loadIns();
        });
				
			},
			handleEdit(id) {
				this.$axios.get("admin/ins/" + id).then(res => {
					this.updateForm = res.data.data;
				});
				this.dialog.updateshow = true;
			},
			//巡检员详情信息
			handleDetil(id) {
				this.isMain = !this.isMain;
				this.$axios.get("admin/ins/sel/"+id).then((res) => {
					this.insDetailData1 = res.data.data[0];
					this.insDetailData2 = res.data.data[1];
					this.insDetailData3 = res.data.data[2];
				});
			},
			goBack(){
				this.isMain = !this.isMain;
			},
			update() {
				this.$axios
						.put("admin/ins/", this.updateForm)
						.then((res) => {
							if (res.data.code == 200) {
								this.$message.success("修改成功");
								this.dialog.updateshow = false;
								this.loadIns();
								
							} else {
								this.$message.error("修改失败");
							}
						})
						.catch((error) => {
							this.$message.error("出错了！请稍后重试");
						})
						.then(() => {
							this.$refs.updateForm.resetFields();
						});
			},
			handleDisable1(id){
				this.$axios
			        .put("admin/ins/update/"+id)
			        .then((res) => {
				       if (res.data.code == 200) {
					      this.$message.success("修改成功");
					      this.loadIns();
				 } else {
					this.$message.error("修改失败");
					}
				})
			},
			handleDisable2(id){
				this.$axios
			        .put("admin/ins/update1/"+id)
			        .then((res) => {
				       if (res.data.code == 200) {
					      this.$message.success("修改成功");
					      this.loadIns();
				 } else {
					this.$message.error("修改失败");
					}
				})
			},
			handleDelete(id) {
				this.$axios
						.delete("admin/ins/" + id)
						.then((res) => {
							if (res.data.code == 200) {
								this.$message.success("删除成功");
								this.loadIns();
							} else {
								this.$message.info("删除失败");
							}
						})
						.catch((error) => {
							this.$message.error("出错了！请稍后重试");
						});
			},
			//获取所有的执勤时间
			loadCheck() {
      				this.$axios.get("admin/ins/check").then((res) => {
          			this.checkList = res.data.data;
       			 })
        			.catch((error) => {
          			this.$message.error("出错了，请稍后重试");
        		});
   			 },
		},
		mounted() {
			this.loadIns();
			this.loadCheck();
		},
		
	}
</script>

<style>
	.uoloadSty .el-upload--picture-card {
	  width: 110px;
	  height: 110px;
	  line-height: 110px;
	}
	.disUoloadSty .el-upload--picture-card {
	  display: none; /* 上传按钮隐藏 */
	}
	.picture {
	  width: 60px;
	  height: 60px;
	  border: 0px;
	}
	.disabled .el-upload--picture-card {
	  display: none; /* 上传按钮隐藏 */
	}
			
	  </style>